import React from 'react'
import {observer, inject} from "mobx-react";
import * as url from '../../../util/api'
import http from '../../../util/http'
import {Row, Col, Radio, DatePicker, Table, Select,} from 'antd';
import './PurchaseOrderDetail.css'
import {
    DownOutlined,
    FormOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
} from "@ant-design/icons";

const {Option} = Select;
const columns = [
    {
        title: '',
        render:(text, record)=>{
            if (record.key !== "合计") {
                return (
                    <span>{record.key+1}</span>
                )
            }else{
                return <span>合计</span>
            }
          },
        dataIndex:'No',
        align: 'center',
    },

    {
        title: '主图',
        dataIndex: 'mainPic',
        align: 'center',

    },
    {
        title: '商品编码',
        dataIndex: 'goodsNo',

    },
    {
        title: '商品名称',
        dataIndex: 'goodsName',
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: '数量',
        dataIndex: 'goodsNum',
    },

    {
        title: '单位',
        dataIndex: 'unit',
    },
    {
        title: '商品参数',
        dataIndex: 'goodsParam',
    },
    {
        title: '单价',
        dataIndex: 'goodsOrderPrice',
    },
    {
        title: '金额小计',
        dataIndex:'countMoney',
        render:(text,record)=>{
            // console.log(record);
            if (record.key==='合计') {
                return <span>{record.countMoney}</span>
            }else{
                return (
                    <span>{(parseInt(record.goodsNum)*parseInt(record.goodsOrderPrice)).toString()}</span>
                )
            }
          },

    },
    {
        title: '备注',
        dataIndex: 'notes',
        key: 'remarks',
        align: 'center',

    },
];
const logColumns = [
    {
        title: '公司名称',
        dataIndex: 'companyName',
        align: 'center',

    },
    {
        title: '操作人',
        dataIndex: 'actPerson',
        align: 'center',

    },
    {
        title: '时间',
        dataIndex: 'time',

    },
    {
        title: '操作类别',
        dataIndex: 'actType',
    },
    {
        title: '操作日志',
        dataIndex: 'log',
    },

];
const logTableData = [{
    key: 0,
    companyName: 'Tencent',
    actPerson: '冶少',
    time: '2020-05-11 12:16:18',
    actType: '订单审核',
    log: '通过订单DH-OA-234255234的订单审核',
}];
const tableData =   [
    {
        key: 0,
        No: '1',
        orderTime: <span style={{cursor: 'pointer'}}>+</span>,
        customerName: '欧尚超市',
        money: 2000,
        goodsNum:8,
        goodsOrderPrice:20,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key:'合计',
        No: '合计',
        goodsNum: 0,
        countMoney: 0.00,
    },

];

@inject('orderStore')
@observer
class PurchaseOrderDetailItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText: '全部级别',
            selectValue: 1,
            current: '订单详情',
            orderNo: ' DH-O-20200508-405868 ',
            customerName: '小雷家电线厂',
            value: 1,
            logVisible: false,
            myOrderAuditStatus: '',
            tableData: '',
        }
    }

    clickLog = () => {
        this.setState({
            logVisible: !this.state.logVisible,
        })
        if (this.state.logVisible) {
            //箭头顺时针旋转180度
        } else {
            //箭头逆时针旋转180度
        }
    }
    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectValue: value,
        })
    }
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    exchangeOrderAuditStatus = () => {
        let myOrderAuditStatus = ''
        console.log(this.props.orderStore.orderAuditStatus);
        switch (this.props.orderStore.orderAuditStatus) {
            case 0:
                myOrderAuditStatus = '待订单审核';
                break;
            case 1:
                myOrderAuditStatus = '待财务审核';
                break;
            case 2:
                myOrderAuditStatus = '待出库审核';
                break;
            case 3:
                myOrderAuditStatus = '待发货确认';
                break;
            case 4:
                myOrderAuditStatus = '待收货确认';
                break;
            case 5:
                myOrderAuditStatus = '退单审核';
                break;
        }
        this.setState({
            myOrderAuditStatus: myOrderAuditStatus
        })
        // console.log(this.state.myOrderAuditStatus);
    }
    getGoodsInfo = (goodsId,index) => {
        let obj = {goodsId: goodsId}
        console.log(obj);
       return http({
            url: url.orderQueryGoods,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                this.setGoodsInfo(resp.data.data,index);
            }

        }).catch(err => {
            console.log(err);
        })
    }
    setGoodsInfo = (data,index) => {
        let newData = this.state.tableData;
        Object.assign(newData[index], {mainPic: data.goodsImgId})
        Object.assign(newData[index], {goodsName: data.goodsName})
        Object.assign(newData[index], {goodsSpecs: data.goodsSpecifications})
        Object.assign(newData[index], {goodsOrderPrice: data.goodsOrderPrice})

        console.log(newData);
        this.setState({
            tableData: newData
        })
    }
    addLastRowData=()=>{
        let goodsNum=0,countMoney=0
        let newData = this.state.tableData
        console.log(newData);
        newData.map(item=>{
            console.log(item.goodsOrderPrice);
            goodsNum+=item.goodsNum
            countMoney+=item.goodsOrderPrice*item.goodsNum
        })
        let data = JSON.parse(JSON.stringify(newData))
        data.push( {
            key:'合计',
            No: '合计',
            goodsNum: goodsNum,
            countMoney: countMoney,
        },)
        this.setState({
            tableData: data,
            countMoney:countMoney.toString()
        })
    }
    setTableData = (data) => {
        let newData = [];
        data.map((item,index) => {
            newData.push({goodsNum: item.goodsNum,notes: item.notes,key:index})
        })

        this.setState({
            tableData: newData
        })
    }
    getOrderDetail = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        http({
            url: url.orderOrderDetails,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                this.setTableData(resp.data.data)
                //查询商品信息
                resp.data.data.map((item,index) => {
                    this.getGoodsInfo(item.goodsId,index).then(res=>{
                        if(index===resp.data.data.length-1){
                            this.addLastRowData()
                        }
                    })
                })

            }

        }).catch(err => {
            console.log(err);
        })
    }

    componentDidMount() {
        // console.log(this.props.orderStore);

        this.exchangeOrderAuditStatus();
        this.getOrderDetail()

    }
    componentWillReceiveProps(nextProps, nextContext) {
        this.exchangeOrderAuditStatus()
    }

    render() {

        let {countMoney,tableData} = {...this.state}
        {
            console.log(tableData);}
        function onChange(date, dateString) {
            console.log(date, dateString);
        }

        return (<div style={{position: 'relative', backgroundColor: 'white'}}>
            {/*//订单详情*/}
            <Row>
                <Col span={24}>
                    <Row style={{marginTop: 20}} align={'middle'}>
                        <Col span={17}>
                            <span className={'orderInfo'} style={{
                                fontSize: '1.1rem',
                                color: '#FB7884'
                            }}>{this.state.myOrderAuditStatus}</span>
                            <span className={'orderInfo'}>订单号：{this.state.orderNo} <span
                                className={'orderWay'}>代下单</span>  </span>
                            <span className={'orderInfo'}>客户名称：{this.state.customerName}【三级代理】</span>
                            <span className={'orderInfo'}>业务员：冶少</span>
                        </Col>
                        <Col span={7} align={'right'} style={{display: 'flex', justifyContent: 'flex-end'}}>
                            排序：
                            <Radio.Group className={'detailRadio'} onChange={this.onChange} value={this.state.value}>
                                <Radio value={1} className={'sortRadio'} style={{width: '8rem'}} align={'left'}>
                            <span style={{width: '7rem', display: 'flex'}}>
                                <span>
                                   按下单顺序
                                </span>
                            <span className={'orderSort'}>
                                <CaretUpOutlined style={{fontSize: '.5rem'}}/>
                                <CaretDownOutlined style={{fontSize: '.5rem'}}/>
                            </span>
                            </span>

                                </Radio>

                                <Radio value={2}>按商品编码</Radio>

                            </Radio.Group>

                        </Col>


                    </Row>
                    <Row className={'detailTable'}>
                        <Table
                            bordered
                            pagination={{position: ['none', 'none'],}}
                            columns={columns}
                            dataSource={tableData}
                            className='table'
                        />

                    </Row>
                    <Row className='countMoney' align={'middle'}>
                        <Col span={22} align='right'>应付金额：</Col>
                        <Col span={2} align='center' style={{color: '#F33333', fontSize: '1.2rem'}}>{parseFloat(countMoney)}</Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2} style={{paddingRight: '2rem'}}>默认发货仓库</Col>
                        <Col span={4}>
                            <Select defaultValue="1" style={{marginLeft: '-1rem', width: '100%'}}
                                    onChange={this.handleChange}>
                                <Option value="1">深圳仓</Option>
                                <Option value="2">成都仓</Option>
                                <Option value="3">上海仓</Option>
                            </Select>
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>收货信息</Col>
                        <Col span={22} style={{marginLeft: '-1rem'}}>
                            <FormOutlined style={{marginRight: '.5rem'}}/>
                            <span className={'customer'}>客户名称 : 小雷家电线厂</span>
                            <span className={'customer'}>收货人 :小雷 </span>
                            <span className={'customer'}>联系方式 : 15659190218</span>
                            <span>收货地址 :成都 </span>
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>
                            <span>交货日期</span>
                        </Col>
                        <Col span={4}>
                            <DatePicker style={{marginLeft: '-1rem', width: '100%'}} placeholder={'请选择日期'}
                                        onChange={onChange}/>
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>
                            <span>制单人</span>
                        </Col>
                        <Col span={4}>
                            <span style={{marginLeft: '-1rem'}}>黄金梨</span>
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>

                            <span>备注说明</span>
                        </Col>
                        <Col span={20} style={{marginLeft: '-1rem'}}>
                            <FormOutlined style={{marginRight: '.5rem'}}/>
                            无
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={24}>
                            <Row>
                                <Col span={2}>
                                    <span>附件信息</span>
                                </Col>
                                <Col span={22}>
                         <span style={{marginLeft: '-1rem'}} className={'fujianBt'}><span
                             className={'iconfont icon-fujian fujian'}/>添加附件</span>
                                    <span>（单个附件最大支持20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、BMP、GIF、RAR、ZIP）</span>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={2}>

                                </Col>
                                <Col span={22} style={{marginLeft: '-1rem'}}>
                                    暂无附件
                                </Col>

                            </Row>
                        </Col>

                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={3}>
                            <span onClick={this.clickLog}>操作日志 <DownOutlined
                                className={this.state.logVisible ? 'logIconUp' : 'logIconDown'}/></span>
                        </Col>
                    </Row>
                    {this.state.logVisible ? <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={24} className={'logTable'}>
                            <Table
                                bordered
                                pagination={{position: ['none', 'none'],}}
                                columns={logColumns}
                                dataSource={logTableData}
                                className='table'
                            />
                        </Col>
                    </Row> : null}
                </Col>
            </Row>


        </div>);

    }
}

export default PurchaseOrderDetailItem
